<script setup lang="ts">
// 引入首页轮播图组件
import Carousel from '@/pages/home/carousel/index.vue'
// 引入搜索框组件
import Search from '@/pages/home/search/index.vue'
// 引入首页等级的组件
import Level from '@/pages/home/level/index.vue'
// 引入地区组件
import Region from '@/pages/home/region/index.vue'
// 展示医院信息的卡片组件
import Card from '@/pages/home/card/index.vue'
import Tip from '@/pages/home/tip/index.vue'
// 引入请求数据的方法
import {reqHospital} from "@/api/home";
import type {HospitalResponseData, Content} from "@/api/home/type.ts";

// 分页器需要的数据
import {ref, onMounted} from 'vue'
// 分页器页面
let pageNo = ref<number>(1);
// 分页器一页展示几条数据
let pageSize = ref<number>(10);
// 总条数
let total = ref<number>(0)
// 存储已有的医院的数据
let hasHospitalArr = ref<Content>([])

// 存储选择医院等级的数据
let hostype = ref<string>('')
// 存储选择地区的数据
let districtCode = ref<string>('')

// 组件挂载时请求数据
onMounted(() => {
  getHospital()
})

// 获取已有医院的数据
const getHospital = async () => {
  // 获取医院数据，默认是一页10条数据
  let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
  if (result.code == 200) {
    hasHospitalArr.value = result.data.content
    total.value = result.data.totalElements
  }
}

// 分页器页面发送变化的时候
const currentChange = (page: number) => {
  pageNo.value = page
  getHospital()
}

// 分页器下拉菜单发送变化的时候触发
const sizeChange = (size: number) => {
  // 当前页面归1
  //pageNo.value = 1
  getHospital()
}

// 子组件自定义事件:获取儿子给父组件传递过来等级的参数
const getLevel = (level: string) => {
  // 存储选择的医院等级
  hostype.value = level
  getHospital()
}

// 子组件自定义事件:获取儿子给父组件传递过来地区的参数
const getRegion = (region: string) => {
  // 存储选择的地区
  districtCode.value = region
  getHospital()
}
</script>

<template>
  <div>
    <!--首页轮播图结构-->
    <Carousel></Carousel>
    <!--首页搜索医院的表单区域-->
    <Search></Search>
    <el-row :gutter="20">
      <el-col :span="20">
        <!--医院等级-->
        <Level @getLevel="getLevel" />
        <!--地区-->
        <Region @getRegion="getRegion" />
        <!--展示医院的信息-->
        <div class="hospital" v-if="hasHospitalArr.length>0">
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item" />
        </div>
        <el-empty v-else description="没有医院"></el-empty>
        <!--分页器-->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total, "
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>

  </div>
</template>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
